<template>
  <div id="staff-management">
    <div class="toolbar">
      <a-button type="primary" id="create-staff-btn" @click="openCreateStaffModal">{{t('operations.createStaff')}}</a-button>
      <a-input hint="" type="text" :placeholder="t('operations.searchHint')"></a-input>
      <a-button type="primary" id="refresh-btn" @click="reloadTableData">{{t('operations.refresh')}}</a-button>
      <a-switch v-model:checked="onlyDepartment" :checked-children="t('operations.department')" :un-checked-children="t('operations.all')" />
    </div>
    <a-table :columns="columns"
     :row-key="record => record.id"
     :data-source="data"
     :pagination="pagination"
     :loading="loading"
     :scroll="{ x: 1500 }"
     @change="handleTableChange">

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">

          <a v-if="getLocalStaff().account.role.indexOf('ROLE_SUPERADMIN') >= 0 || (getLocalStaff().account.role.indexOf('ROLE_DEPTADMIN') >= 0 && getLocalStaff().department.id == record.department.id)" @click="openStaffDetailModal(record.id)"> {{record.name}}</a>
          <span v-else>
            {{ record.name }}
          </span>
          <a-space ></a-space>
          <span color="pink" v-if="record.id == getLocalStaff().id "> / {{t('operations.me')}}</span>
        </template>
        <template v-else-if="column.key === 'gender'">
          <span>
              {{ t(`enums.gender.${record.gender}`) }}
          </span>
        </template>
        <template v-else-if="column.key === 'departmentname'">
          <span>
            <a-tag color="blue">
              {{ record.department.name }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'state'">
          <span>
            <a-tag :color="record.state=='OK' ? 'green' : 'red'">
              {{ t(`enums.staffState.${record.state}`) }}
            </a-tag>
          </span>
        </template>
        <template v-else-if="column.key === 'note'">
          <span>
          {{record.note ? record.note : "什么也没有..."}}
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span v-if="getLocalStaff().account.role.indexOf('ROLE_SUPERADMIN') >= 0 || (getLocalStaff().account.role.indexOf('ROLE_DEPTADMIN') >= 0 && getLocalStaff().department.id == record.department.id)">
            <a @click="openChangeAccountPasswordModal(record.account.id)">{{t('operations.changePassword')}}</a>
            <a-divider type="vertical" />
            <a @click="toggleAccountLockState(record)">
              {{record.account.state == 'OK' ? t('operations.closeAccount') : t('operations.openAccount')}}
            </a>
            <a-divider type="vertical" />
            <a @click="deleteStaff(record)">{{t('operations.deleteStaff')}}</a>
          </span>
        </template>

      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import useStaffList from '@/composable/staff_list';
import useStaffDetailModal from '@/composable/staff_detail_modal';
import useStaff from '@/composable/staff';
import { useI18n } from 'vue-i18n';
import { message } from 'ant-design-vue';
import useStaffAccountModifier from '@composable/staff_account_modifier';
/*
* 如果你使用的 Vite，你可以使用 unplugin-vue-components 来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：
*
* import { message } from 'ant-design-vue';
* import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
*/
import 'ant-design-vue/es/message/style/css';

const onModifyOperationSuccessed = () => {
  message.success('操作成功');
  reloadTableData();
}
const onModifyOperationFaild = (err) => {
  message.error(`操作失败：${err}`)
}

const {getLocalStaff} = useStaff();


const { onlyDepartment, columns, data, pagination, loading, handleTableChange, reloadTableData } = useStaffList();
const { openStaffDetailModal } = useStaffDetailModal(onModifyOperationSuccessed, onModifyOperationFaild);
const { openChangeAccountPasswordModal, openCreateStaffModal, changeStaffAccount, deleteStaff } = useStaffAccountModifier(onModifyOperationSuccessed, onModifyOperationFaild);


const { t } = useI18n();

const toggleAccountLockState = (staff) => {
  const opstaff = JSON.parse(JSON.stringify(staff));
  opstaff.account.state = opstaff.account.state == 'OK' ? 'CLOSED' : 'OK';
  changeStaffAccount(opstaff);
};


</script>

<style scoped>

#staff-management {
  padding: 40px;
}
.toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.toolbar > input {
  flex: 1;
}
.toolbar >  #refresh-btn{
  margin-right: 20px;
}

</style>